<template>
    <div class="container">
      <div class="main-tab">
        <x-header id="header" title="排行榜" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">排行榜</span>
        </x-header>
      </div>
      <div class="ranking" @click="smokerank">
        <img src="../../../static/icon/ranking/mingjiupaihang.png" alt="">
        <span>名烟排行榜</span>
      </div>
      <div class="ranking2" @click="winerank">
        <img src="../../../static/icon/ranking/mingyanpaihang.png" alt="">
        <span>名酒排行榜</span>
      </div>
    </div>
</template>

<script>
    export default {
        name: "rank",
      methods:{
        back(){
          this.$router.go(-1)
        },
        smokerank(){
          this.$router.push({
            name:'smokerank'
          })
        },
        winerank(){
          this.$router.push({
            name:'winerank'
          })
        }
      }
    }
</script>

<style scoped>
  .header-tit{
    margin-top: 0.2rem;
  }
.container{
  height: 100vh;
  background-image: url("../../../static/icon/ranking/rankingbg.png");
  overflow: hidden;
}
#header{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
  .ranking{
    width: 24.64rem;
    height: 9.36rem;
    background: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    border-radius: 5px;
    margin-top: 7.93rem;
    position: absolute;
    left: 50%;
    margin-left: -12.32rem;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .ranking img{
    width: 7.14rem;
    height: 7.14rem;
    margin-left: 1.07rem;
  }
  .ranking span{
    margin-left: 1.08rem;
    font-size: 36px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
.ranking2{
  width: 24.64rem;
  height: 9.36rem;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  border-radius: 5px;
  margin-top: 24.43rem;
  position: absolute;
  left: 50%;
  margin-left: -12.32rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.ranking2 img{
  width: 7.14rem;
  height: 7.14rem;
  margin-left: 1.07rem;
}
.ranking2 span{
  margin-left: 1.08rem;
  font-size: 36px;
  color: #AD2532;
  letter-spacing: 0;
  text-align: center;
}
</style>
